# Component: Media Program Item

Condensed schedule row with real-time status indicators

Broadcast Block

### BEM Anatomy

| Type      | Class Name                | Description                                                                               |
| --------- | ------------------------- | ----------------------------------------------------------------------------------------- |
| ==Block== | `.as-media-program-item`  | The main row container. Handles conditional date header rendering.                        |
| Element   | `__content`               | The internal flex wrapper that houses the badge, text, and action buttons.                |
| Element   | `__badge`                 | Status indicator container. Uses circular badges for state mapping.                       |
| Element   | `__text`                  | Primary content area. Flex-grow enabled to fill remaining row space.                      |
| Element   | `__time`                  | Wrapper for the scheduling period. Often bolded or accented to indicate current progress. |
| Element   | `__time-from`             | The starting timestamp for a program.                                                     |
| Element   | `__time-dash`             | A decorative or functional separator (usually a "—") between start and end times.         |
| Element   | `__time-to`               | The ending timestamp for a program.                                                       |
| Element   | `__title`                 | The name of the program or broadcast segment. Handles truncation for long titles.         |
| Element   | `__action`                | The container for interactive triggers located at the end of the row.                     |
| Element   | `__button`                | Base class for program-specific buttons.                                                  |
| Modifier  | `__button--play`          | Contextual styling for the action button (circular).                                      |
| Modifier  | `__button--detail-toggle` | Styles the button used to expand the collapsible description area.                        |
| Element   | `__detail`                | Collapsible description area. Features specific alignment logic.                          |
| Element   | `__description`           | The text-heavy summary of the program found within the `__detail` section.                |

### State Mapping

The status badge color is determined by the current UTC time (`nowTicks`) relative to the stream's start and end times.

###### Live Now

`as-badge--success`

###### Upcoming

`as-badge--warning`

###### Ended

`as-badge--danger`

##### Generated HTML (Live State)

```html
<div class="as-media-program-item">
    <div class="as-media-program-item__content">
        <div class="as-media-program-item__badge">
            <span class="as-badge--program-state as-badge--success"></span>
        </div>
        <div class="as-media-program-item__text">
            <div class="as-media-program-item__time">20:00 - 21:00</div>
            <h6 class="as-media-program-item__title">Evening News</h6>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-media-program-item {
  &__description {
    // Aligns the description text with 
    // the title, skipping the badge width.
    margin-left: calc(#{$spacer} + 1.2rem);
    overflow: hidden;
  }

  &__button {
    // Standardized circular action UI
    border-radius: 50%;
  }
}
```
